<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Iframe-Resizer Examples</title>
    <meta name="description" content="iFrame message passing test" />
    <meta name="viewport" content="width=device-width" />
    <style>
      a.toggle {
        float: right;
        margin-left: 8px;
      }
      #callback {
        margin: -5px 0 5px 24px;
      }

      iframe {
        width: 100%;
        height: 100vh;
        /* border-width: 0; */
      }

    </style>
    <script
      type="text/javascript"
      src="../../js-dist/iframe-resizer.parent.js"
    ></script>
  </head>

  <body>
    <a href="#" id="toggle" class="toggle">Toggle iFrame</a>
    <h2>Automagically resizing iFrame</h2>
    <p>
      Resize window or click one of the links in the iFrame to watch it resize.
      Or try with <a name="anchorParentTest" href="two.html">two iFrames</a>.
    </p>

    <div id="iframeContainer" style="margin: 20px">
      <iframe
        src="child/frame.content.html"
        scrolling="no"
      ></iframe>
    </div>
    
    <p id="callback"></p>
    <div style="margin: 8px 0 0 24px; font-size: 13px">
      For details on how this works, see
      <a href="https://iframe-resizer.com">https://frame-resizer.com</a>.
    </div>

    <script type="text/javascript">
      /*
       * If you do not understand what the code below does, then please just use the
       * following call in your own code.
       *
       *   iframeResize({ license: 'YOUR-LICENSE' })
       *
       */

      const callbackDisplay = document.querySelector('p#callback')

      const iframes = iframeResize({
        inPageLinks: true,
        license: 'GPLv3',
        log: true,
        waitForLoad: true,

        onResized(messageData) {
          // Callback fn when resize is received
          callbackDisplay.innerHTML = 
          `<b>Frame ID:</b> ${messageData.iframe.id} <br><b>Height:</b> ${messageData.height} <br><b>Width:</b> ${messageData.width} <br><b>Event type:</b> ${messageData.type}`
        },

        onMouseEnter(messageData) {
          // Callback fn when mouse enters iframe
          callbackDisplay.innerHTML = `<b>Frame ID:</b> ${messageData.iframe.id} <br><b>ScreenX:</b> ${messageData.screenX} <br><b>ScreenY:</b> ${messageData.screenY} <br><b>Event type:</b> ${messageData.type}`
        },

        onMouseLeave(messageData) {
          // Callback fn when mouse enters iframe
          callbackDisplay.innerHTML = `<b>Frame ID:</b> ${messageData.iframe.id} <br><b>ScreenX:</b> ${messageData.screenX} <br><b>ScreenY:</b> ${messageData.screenY} <br><b>Event type:</b> ${messageData.type}`
        },

        onMessage(messageData) {
          // Callback fn when message is received
          callbackDisplay.innerHTML = `<b>Frame ID:</b> ${messageData.iframe.id} <br><b>Message:</b> ${messageData.message}`
          alert(messageData.message)
          messageData.iframe.iframeResizer.sendMessage(
            'Hello back from parent page',
          )
        },

        onAfterClose(id) {
          // Callback fn when iFrame is closed
          callbackDisplay.innerHTML = `<b>Iframe (</b>${id}<b>) removed from page.</b>`
        },

        onScroll(messageData) {
          // Callback fn when iframe is scrolled
          callbackDisplay.innerHTML = `<b>Iframe ID:</b> ${messageData.iframe.id} <br><b>Top:</b> ${messageData.top} <br><b>Left:</b> ${messageData.left}`
        },
      })

      function toggle() {
        const iframes = document.querySelectorAll('iframe')
        const iframe = iframes[0]

        iframe.style.display =
          iframe.style.display === 'none' ? 'block' : 'none'
      }

      document.getElementById('toggle').addEventListener('click', toggle)
    </script>
  </body>
</html>
